<template>
  <div class="panel-box">
    <CardHeader :name="MenuName" :type="MenuType" />
    <!-- 动态组件 -->
    <component :is="isPanel" />
  </div>
</template>
<script>
import CardHeader from "./comm/cardHeader.vue";
import TreePanel from "./treePanel.vue";
import NormalPanel from "./normalPanel.vue";
import GridPanel from "./gridPanel.vue";
export default {
  name: "panelLeft",
  components: {
    CardHeader,
    TreePanel,
    NormalPanel,
    GridPanel,
  },
  data() {
    return {
      MenuName: "",
      MenuType: "",
      isPanel: "TreePanel",
      panelList: [
        {
          id: 1,
          name: "TreePanel",
        },
        {
          id: 2,
          name: "NormalPanel",
        },
        {
          id: 3,
          name: "GridPanel",
        },
      ],
    };
  },
  created() {
    // 切换菜单
    this.$bus.$on("meunId", (val) => {
      // console.log("val===",val);
      this.panelList.find((item) => {
        if (item.id == val.id) {
          this.isPanel = item.name;
        }
      });
      this.MenuName = val.name;
      this.MenuType = val.type;
    });
  },
};
</script>
<style lang="scss" scoped>
.panel-box {
  height: calc(100vh - 72px);
  width: 280px;
  // background-color: #202735;
  background-color: var(--bgc);
  margin: 0 4px;
  box-sizing: border-box;
  position: absolute;
  top: 68px;
  left: 48px;
}
</style>
